<template>
  <div class="datail">
    <h4>{{photoDatail.title}}</h4>
    <p>
      <span class="fl">发表时间：{{(photoDatail.add_time|| '').split('T')[0]}}</span>
      <span class="fr">点击次数：{{photoDatail.click}}</span>
    </p>
    <hr />
    <ul>
      <li v-for="(item1,i) in photoDatailImg" :key="i">
        <img :src="item1.src" />
      </li>
    </ul>
    <div v-html="photoDatail.content"></div>
    <comment></comment>
  </div>
</template>

<script>
import comment from '../../components/comment.vue'
export default {
  data() {
    return {
      photoDatail: {},
      id: this.$route.params.id,
      photoDatailImg: []
    }
  },
  created() {
    this.getPhotoDatail()
  },
  methods: {
    async getPhotoDatail() {
      const { data: res } = await this.$http.get(`/api/getimageInfo/${this.id}`)
      if (res.status !== 0) {
        return this.$toast('获取详情失败！')
      }
      this.photoDatail = res.message[0]
      const { data: res1 } = await this.$http.get(
        `api/getthumimages/${this.id}`
      )
       if (res1.status !== 0) {
        return this.$toast('获取图片失败！')
      }
      this.photoDatailImg = res1.message
    }
  },
  components: {
    comment
  }
}
</script>

<style lang="less" scoped>
h4 {
  text-align: center;
  color: #26a2ff;
  font-size: 15px;
}
p {
  overflow: hidden;
  span {
    font-size: 13px;
    color: #8f8f94;
  }
}
ul {
  list-style: none;
  margin: 10px 0;
  padding: 0 5px;
  overflow: hidden;
  li {
    float: left;
    width: 33.3333%;
    padding: 5px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    img {
      width: 100%;
    }
  }
}
</style>
